<template>
	<view v-if="info.id">
		<u-swiper :list="info.images" height="500"></u-swiper>
		<view class="u-padding-30" style="border-radius: 100rpx 100rpx 0 0;padding-top: 100rpx;">
			<view class="u-font-weight u-font-lg">{{info.goodsName}}</view>
			<view class="u-flex u-row-between u-margin-top-20">
				<view class="u-flex">
					<view style="color: #FF5D39;font-size: 38rpx;" class="u-font-weight ">
						￥{{info.price}}</view>
				</view>
				<view class="$u-type-info u-th-line">
					￥{{info.linePrice}}
				</view>
			</view>

			<view class="u-margin-top-20 u-flex u-row-between">
				<view class="$u-type-info  u-font-sm "><text
						class="u-margin-right-30">已售{{info.total}}件</text><text>仅剩{{info.sku}}件</text></view>
				<view @click="collect">
					<u-icon :name="info.collectCount?'heart-fill':'heart'"  :color="info.collectCount?'#FF5D39':''"></u-icon>
					 <text class="u-font-xs u-margin-left-10 u-font-weight">{{info.collectCount?'已收藏':'收藏'}}</text>
					
				</view>
			</view>
			
					
					
					
		</view>

		<u-gap height="10" bg-color="#f1f1f1"></u-gap>


		<view class="u-padding-30">
			<view class="u-text-center u-font-lg u-font-weight">产品参数</view>
			<view class="text" v-for="(item,index) in info.param" :key="index">
				<view class="left">{{item.name}}</view>
				<view class="right">{{item.value}}</view>
			</view>
		</view>

		<u-gap height="10" bg-color="#f1f1f1"></u-gap>

		<view class="u-margin-top-20">
			<view class="u-text-center u-font-lg u-font-weight">商品详情</view>
			<view class="u-padding-20">
				<u-parse :html="info.detail"></u-parse>
			</view>
		</view>






		<view class="bottom u-flex">
			<view class="u-flex u-flex-2 u-row-around u-text-center " @click="goCar">
				<view class="" style="position: relative;">
					<u-icon name="shopping-cart" size="40"></u-icon>
					<u-badge class="car-num" :count="count" type="error" :offset="[-3, -6]"></u-badge>
					<view style="font-size: 24rpx;">购物车</view>
				</view>
			</view>
			<view class="u-flex-3 u-text-center u-flex" >
				<view class="btn  blue" @click="addCar('add')">加入购物车</view>
				<view class="btn  red" @click="addCar('buy')">立即购买</view>
			</view>
		</view>

         <SelectSize ref="chilren" @spc="spc"></SelectSize>

	</view>
</template>

<script>
		import SelectSize from '@/components/SelectSize.vue';
		import {
			mapGetters,
			mapMutations,
			mapState,
		} from 'vuex';
	export default {
components: {
			SelectSize
		},
		computed:{
			...mapState(["info"])
		},
		data() {
			return {
				
				id: "",

count: "",
			}
		},
		onReady() {
		},
		onLoad(options) {
			if (options.id) {
				this.id = options.id
			}
			this.jiazai()
		},
		onShow() {
this.carnum()

		},
		methods: {
			...mapMutations(["SET_INFO"]),
			
			carnum() {
							this.$u.api.carNum().then(res => {
								this.count = res.cart
							})
						},
			addCar(e) {
				this.$refs.chilren.IsImmediate=e;
				this.$refs.chilren.show = true;
			
			},
			jiazai() {
				this.$u.post('/index/goodsDetail', {
					goods_id: this.id
				}).then(res => {
					res.spec.forEach(item=>{
						item.current = -1;
						item.child.forEach((item1,index)=>{
							
							item1.checked=false;
						})
					})
					
					this.SET_INFO(res);
				}).catch(err => {

				})
			},
			collect(){
				this.$u.api.collect({
					type:"goods",
					id:this.id
				}).then(res=>{
					if(!this.info.collectCount){
						this.$u.toast("收藏成功");
					}else{
						this.$u.toast("取消收藏");
					}
					
					this.jiazai()
				})
				
			},
			goCar(){

					uni.navigateTo({
						url:"./car"
					})
				
			}

		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 100rpx;
	}

	.bottom {
		position: fixed;
		bottom: 0;
		width: 750rpx;
		height: 120rpx;
		border-top: 1rpx solid #F1F1F1;
		background: #FFFFFF;

		.btn {
			color: #fff;
			height: 80rpx;
			line-height: 80rpx;
			font-size:26rpx;
			width:240rpx;
			margin-right: 20rpx;
			border-radius: 80rpx;
			

			&.blue {
				background: #FFA843;
			}

			&.red {
				background: #FF5D39;
			}
		}
	}

	.text {
		display: flex;
		padding: 10rpx 0;

		.left {
			width: 200rpx;
			color: #C2C2C2
		}

		.right {
			font-weight: bold;
		}
	}
</style>
